<template>
  <div class="order">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input placeholder="顾客名" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="手机号" />
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
    <!-- 选项卡 -->
    <el-tabs v-model="param.status">
      <el-tab-pane label="所有订单" name="all"></el-tab-pane>
      <el-tab-pane label="待支付订单" name="未付款"></el-tab-pane>
      <el-tab-pane label="待派单订单" name="待派单"></el-tab-pane>
      <el-tab-pane label="待服务订单" name="待服务"></el-tab-pane>
      <el-tab-pane label="待确认订单" name="待确认"></el-tab-pane>
      <el-tab-pane label="已完成订单" name="已完成"></el-tab-pane>
    </el-tabs>
    <!-- 订单列表 -->
    <el-table :data="orders" size="small">
      <!-- 折叠列 -->
      <el-table-column type="expand">
        <template v-slot="scope">
          <!-- 订单项表格 -->
          <el-table :data="scope.row.orderLines" size="mini" border>
            <el-table-column label="图片" width="80">
              <template v-slot="scope">
                <img
                  style="width:50px; height:50px; border-radius:3px"
                  :src="'http://121.199.29.84:8888/'+scope.row.productPhoto"
                  alt
                />
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="productName" width="120"></el-table-column>
            <el-table-column label="单价" prop="productPrice" width="60"></el-table-column>
            <el-table-column label="数量" prop="number" width="120"></el-table-column>
            <el-table-column label="介绍" prop="productIntroduce"></el-table-column>
          </el-table>
          <!-- /订单项表格 -->
        </template>
      </el-table-column>
      <!-- 普通列 -->
      <el-table-column label="编号" type="index" :index="1" align="center"></el-table-column>
      <el-table-column label="下单时间" prop="orderTime" width="150"></el-table-column>
      <el-table-column label="总价" prop="total" width="60"></el-table-column>
      <el-table-column label="顾客" prop="customer.realname" width="60"></el-table-column>
      <el-table-column label="员工" prop="employee.realname" width="60"></el-table-column>
      <el-table-column label="状态" prop="status" width="60"></el-table-column>
      <el-table-column label="地址">
        <template v-slot="scope">
          <div>{{scope.row.address.province+" "+scope.row.address.city+" "+scope.row.address.area+" "+scope.row.address.address}}</div>
          <div>{{scope.row.address.username}} {{scope.row.address.telephone}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            v-if="scope.row.status==='待派单'"
            size="mini"
            @click="sendOrder(scope.row.id)"
          >去派单</el-button>
          <el-button disabled type="success" v-if="scope.row.status==='已完成'" size="mini">已完成</el-button>
          <el-button disabled type="primary" v-if="scope.row.status==='待服务'" size="mini">待服务</el-button>
          <el-button disabled type="primary" v-if="scope.row.status==='待确认'" size="mini">待确认</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog title="派单" :visible.sync="visible">
      <el-radio
        v-for="e in employee"
        v-if="e.status==='启用'"
        v-model="employeeId"
        :label="e.id"
        :key="e.id"
      >{{e.realname}}</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      param: {
        status: 'all'
      },
      orders: [],
      employee: [],
      orderId: '',
      employeeId: '',
      visible: false
    }
  },
  created() {
    // 初始化查询
    this.loadOrders()
  },
  watch: {
    // 监听param的变化，一旦变化立刻查询
    param: {
      handler: function() {
        this.loadOrders()
      },
      deep: true
    }
  },
  methods: {
    // 加载订单信息
    loadOrders() {
      let url = 'http://47.93.12.6:8889/order/query'
      // 当状态为all，说明查询所有订单，不对订单状态进行过滤，删除这个属性即可
      // 1. 克隆param
      let param = Object.assign({}, this.param)
      // 2. 处理数据
      if (param.status == 'all') {
        delete param.status
      }
      get(url, param).then(response => {
        this.orders = response.data
      })
    },
    // 派单
    sendOrder(id) {
      this.orderId = id
      this.visible = true
      this.loadEmployee()
    },
    // 查找所有的员工
    loadEmployee() {
      let url = 'http://47.93.12.6:8889/user/findAllEmployee'
      get(url).then(response => {
        this.employee = response.data
      })
    },
    close() {
      this.visible = false
    },
    submit() {
      let data = {
        orderId: this.orderId,
        employeeId: this.employeeId
      }
      let url = 'http://47.93.12.6:8889/order/sendOrder'
      get(url, data).then(response => {
        this.$message({ type: 'success', message: response.message })
      })
      this.visible = false
      this.loadOrders()
    }
  }
}
</script>
